import { InputHTMLAttributes, useEffect, useRef } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
// 类型声明
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
  focus?: boolean
  className?: string
  extra?: string
  type?: 'text' | 'password'
  onExtraClick?: () => void
}
export default function Input({
  focus,
  className,
  extra,
  type = 'text',
  onExtraClick,
  ...rest
}: InputProps) {
  // 文本输入框对象
  const inputRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (focus) {
      inputRef.current && inputRef.current.focus()
    }
  }, [focus])
  return (
    <div className={classNames(styles.root, className)}>
      <input type={type} ref={inputRef} className="input" {...rest} />
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}
